<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>合同模板管理</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <!--<script src="./js/vue-strap.min.js"></script>-->
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/qiyuesuo.js"></script>
</head>
<body>
<div id="app">
    <h1 class="text-center text">合同模板的管理</h1>

    <div class="panel panel-default offset-3">
        <div class="panel panel-body">
            <div class="row">
                <div class="col-1  text-right">名称：</div>
                <input type="text" name="title" class="col-3">
            </div>
            <div class="row">
                <div class="col-1 text-right">文件:</div>
                <input type="file" name="file" class="btn btn-primary col-2" id="logofile" @change='upfile'>
                <input type="hidden" id="filepath">
            </div>
            <div class="row">
                <div class="text-center text col-2">{{fileurl}}</div>
            </div>
            <div class="row">
                <p class="col-2"> {{message}}</p>
            </div>
        </div>
    </div>
    <div class="offset-3 row">
        <button class="btn btn-danger " id="btnCreate" @click="tempCreate">创建模板</button>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            isOn: false,
            message: '上传后的路径',
            fileurl: ''
        },
        methods: {
            tempCreate: function () {
                // var fis=$("#logofile");
                var fff=window.document.getElementById("logofile");
                var count= fff.files.length;
                //var filecount=$("#logofile").files.length;

                if(this.fileurl==null || this.fileurl==""){
                    alert("文件还未上传完成，请选择文件上传！");
                    return;
                }
                alert("点击了");
            },
            upfile: function (e) {
                if (e == null || e == undefined || e == '') {
                    return false;
                }
                var formData = new window.FormData();
                formData.append('file', e.target.files[0]);
                formData.append('type', 'test');
                alert(e.target.files[0].name);
                if (!/\.(?:docx|DOCX|pdf|PDF)$/.test(e.target.files[0].name)) {
                    alert("类型必须是Word文档或者PDF文件(.docx|pdf)");
                    $('#logofile').val('');
                    return false;
                }
                $.ajax({
                    type: "POST",
                    //url: GLOBAL_INFO.WEBURL_PREFIX+"business/uploadImg.xhtml",
                    url: window.location.protocol + "//" + window.location.host + "/business/uploadImg.xhtml",
                    data: formData,
                    cache: false,
                    contentType: false,    //不可缺
                    processData: false,    //不可缺
                    dataType: "json",
                    success: function (ret) {
                        console.log(ret);
                        if (ret.code == 0) {
                            $("#filepath").val(ret.result.url);//将地址存储好
                            //$("#filepath").attr("src", ret.result.url);//显示图片
                            $("#btnCreate").enabled = true;
                            this.message = ret.result.docpath;
                            this.fileurl = ret.result.url;
                            alert(ret.message);
                        } else {
                            $("#btnCreate").enabled = false;
                            alert(ret.message);
                            $("#filepath").val("");
                            $("#logoFile").reset();
                        }
                    }.bind(this), //bind方法改变this的指向
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("上传失败，请检查网络后重试");
                    }
                });

            }
        }
    })
</script>
<script>
    //用于进行图片上传，返回地址
    function setFile(obj) {
        var f = $(obj).val();
        alert(f);
        console.log(obj);
        if (f == null || f == undefined || f == '') {
            return false;
        }
        if (!/\.(?:docx|DOCX|pdf|PDF)$/.test(f)) {
            alert("类型必须是Word文档或者PDF文件(.docx|pdf)");
            $(obj).val('');
            return false;
        }
        var data = new FormData();
        console.log(data);
        $.each($(obj)[0].files, function (i, file) {
            data.append('file', file);
        });
        console.log(data);
        $.ajax({
            type: "POST",
            //url: GLOBAL_INFO.WEBURL_PREFIX+"business/uploadImg.xhtml",
            url: window.location.protocol + "//" + window.location.host + "/business/uploadImg.xhtml",
            data: data,
            cache: false,
            contentType: false,    //不可缺
            processData: false,    //不可缺
            dataType: "json",
            success: function (ret) {
                console.log(ret);
                if (ret.code == 0) {
                    $("#photoUrl").val(ret.result.url);//将地址存储好
                    $("#filepath").attr("src", ret.result.url);//显示图片
                    $("#btnCreate").enabled = true;
                    alert(ret.message);
                } else {
                    $("#btnCreate").enabled = false;
                    alert(ret.message);
                    $("#url").val("");
                    $(obj).val('');
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("上传失败，请检查网络后重试");
            }
        });
    }
</script>
</body>
</html>